<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-12-25 11:26:30
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-25 13:41:12
 * @FilePath: /hr_new_vue3/src/views/Management/Home/LeaveManagement/WorkHandover/ConfirmModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 确认提交弹出框 -->
<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="600"
  >
    <template #title> 最后确认 </template>
    <div class="index">
      <a-form ref="formRef" :model="form" :rules="rules">
        <a-form-item field="userName" label="交接人">
          <a-input v-model="form.userName" disabled />
        </a-form-item>
        <a-form-item field="confirmId" label="确认人">
          <a-select
            placeholder="请选择"
            v-model="form.confirmId"
            allow-search
            allow-clear
            @popup-visible-change="showHumanModal(1)"
            :popup-visible="false"
            style="width: 350px"
          >
            <a-option
              v-for="item in humanList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="supervisorId" label="监督人">
          <a-select
            placeholder="请选择"
            v-model="form.supervisorId"
            allow-search
            allow-clear
            @popup-visible-change="showHumanModal(2)"
            :popup-visible="false"
            style="width: 350px"
          >
            <a-option
              v-for="item in humanList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
    <HumanRosterModal
      style="z-index: 9999"
      v-model:visible="humanModalVisible"
      @humanRosterEmit="humanRosterEmit"
    ></HumanRosterModal>
  </a-modal>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { getAllHumanRoster } from '@/utils/common';

const props = withDefaults(
  //参数说明
  defineProps<{
    data: any;
    visible: boolean;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'save']);
const form = useVModel(props, 'data', emit);

const formRef = ref();
const rules = {
  userName: {
    required: true,
    message: '请输入'
  },
  confirmId: {
    required: true,
    message: '请选择确认人'
  }
};

let humanList = ref();
const getAllHumanList = async () => {
  const res = await getAllHumanRoster();
  humanList.value = res;
};
getAllHumanList();

let humanModalVisible = ref(false);

let currType = 1; // 1确认人 2 监督人
// 显示人员弹框
const showHumanModal = (type: 1 | 2) => {
  currType = type;
  humanModalVisible.value = true;
};
const humanRosterEmit = (record: any) => {
  if (currType === 1) {
    form.value.confirmId = record.id;
    form.value.confirmName = record.name;
  } else {
    form.value.supervisorId = record.id;
    form.value.supervisorName = record.name;
  }
};

const handleOk = async () => {
  if (await formRef.value.validate()) {
    return;
  }
  emit('save');
  emit('update:visible', false);
};
const handleCancel = () => {
  emit('update:visible', false);
};
</script>
<style lang="less" scoped>
.index {
  display: flex;
}
</style>
